<template>
	<view>
		<view class="header">
			<i class="ri-function-fill" style="color:#7800BE;font-size:12px;"></i>
			<!-- <i-icon size="20upx" color="#7800BE" name="function-fill"> </i-icon> -->
			控制台
			<i class="ri-arrow-right-s-line" style="color:#7800BE;font-size:12px;"></i>
			<!-- <i-icon size="20upx" color="#666" name="arrow-right-s-line"></i-icon> -->
			废旧回收
		</view>
		<view class="bl">
			<view class="h1">
				<i class="ri-community-line" style="color:#999;font-size:22px;"></i>
				<!-- <i-icon size="30upx" color="#999" name="community-line"></i-icon> -->
				废旧回收
			</view>
			<view class="bc">
				<button class="r30" type="button" @click="addOne()">
					<i class="ri-add-circle-fill" style="color:#fff;font-size:12px;"></i>
					<!-- <i-icon size="20upx" color="#fff" name="add-circle-fill"></i-icon> -->
					添加一级分类
				</button>
			</view>
		</view>
		<view v-if="listNoe.length == 0">
			<td colspan="5" style="text-align: center;color:#9c9c9c; ">暂无数据，请添加</td>
		</view>
		<view class="p-table" v-else>
			<table class="pure-table pure-table-horizontal">
				<tr>
					<th style="width: 20%;">id</th>
					<th style="width: 50%;text-align: left;">分类名称</th>
					<th style="width: 30%;">操作</th>
				</tr>
			</table>
			<table v-for="imtl in listNoe" class="pure-table pure-table-horizontal">
				<tr>
					<td style="width: 20%;">{{imtl.id}}</td>
					<td style="width: 50%;">
						<view class="bc">
							<view class="h3">
								<i class="ri-arrow-right-down-fill" style="color:#7800BE;font-size:20px;"></i>
								<!-- <i-icon size="26upx" color="#7800BE" name="arrow-right-down-fill"></i-icon> -->
								{{imtl.name}}
							</view>
							<button style="margin-left: 20px;" type="button" @click="addTwo(imtl.id,imtl.name)">
								<i class="ri-add-circle-fill" style="color:#fff;font-size:12px;"></i>
								<!-- <i-icon size="20upx" color="#fff" name="add-circle-fill"></i-icon> -->
								添加二级分类
							</button>
						</view>
					</td>
					<td style="width: 30%;">
						<view class="bz"></view>
					</td>
				</tr>
				<tr v-if="imtl.id == imts.superId" v-for="imts in listTwo">
					<td>{{imts.id}}</td>
					<td>
						<view class="bc l20">
							<i class="ri-arrow-right-s-line" style="color:#666;font-size:12px;"></i>
							<!-- <i-icon size="20upx" color="#666" name="arrow-right-s-line"></i-icon> -->
							<view class="r10">{{imts.twoName}}</view>
							<view class="red">￥{{imts.price}}/{{imts.unit}}</view>
						</view>
					</td>
					<td>
						<view class="bz">
							<button class="r10" @click="alterTwo(imts)">
								<i class="ri-pencil-fill" style="color:#fff;font-size:12px;"></i>
								<!-- <i-icon size="20upx" color="#FFF" name="pencil-fill"></i-icon> -->
								编辑
							</button>
							<button type="button" class="b-dell" @click="deleteTwo(imts)">
								<i class="ri-delete-bin-line" style="color:#333;font-size:12px;"></i>
								<!-- <i-icon size="20upx" color="#333" name="delete-bin-line"></i-icon> -->
								删除
							</button>
						</view>
					</td>
				</tr>
			</table>
		</view>
		<view v-if="add==1" class="p-tkb">
			<view class="p-tkh"></view>
			<view class="p-tk">
				<view class="tb">
					<view class="titem">
						<i class="ri-add-circle-fill" style="color:#7800BE;font-size:12px;"></i>
						<!-- <i-icon size="20upx" color="#7800BE" name="add-circle-fill" class="r10"></i-icon> -->
						添加分类
					</view>
					<i class="ri-close-circle-fill" style="color:#f73164;font-size:18px;" @click="add=false"></i>
					<!-- <i-icon size="25upx" color="#f73164" name="close-circle-fill" @click="add=false"></i-icon> -->
				</view>
				<view class="com">
					<view class="li bc">
						<view class="wz">类别名称</view>
						<view class="nr"><input type="text" v-model="noeNema"></view>
					</view>
					<view class="bc" style="margin-left: 90px;">
						<button type="button" @click="addOneData()" style="width: 100px;">
							<i class="ri-arrow-right-s-line" style="color:#fff;font-size:12px;"></i>
							<!-- <i-icon size="20upx" color="#fff" name="arrow-right-s-line"></i-icon> -->
							确定
						</button>
					</view>
				</view>
			</view>
		</view>
		<view v-if="add==2" class="p-tkb">
			<view class="p-tkh"></view>
			<view class="p-tk">
				<view class="tb">
					<view class="titem">
						<i class="ri-add-circle-fill" style="color:#7800BE;font-size:12px;"></i>
						<!-- <i-icon size="20upx" color="#7800BE" name="add-circle-fill" class="r10"></i-icon> -->
						添加分类
					</view>
					<i class="ri-close-circle-fill" style="color:#f73164;font-size:18px;" @click="add=false"></i>
					<!-- <i-icon size="25upx" color="#f73164" name="close-circle-fill" @click="add=false"></i-icon> -->
				</view>
				<view class="com">
					<view class="li bc">
						<view class="wz">名称</view>
						<view class="nr"><input type="text" v-model="twoNema"></view>
					</view>
					<view class="li bc">
						<view class="wz">单位</view>
						<view class="nr">
							<select v-model="unit">
								<option value="两">两</option>
								<option value="斤">斤</option>
								<option value="公斤">公斤</option>
								<option value="吨">吨</option>
							</select>
						</view>
					</view>
					<view class="li bc">
						<view class="wz">价格</view>
						<view class="nr"><input type="text" v-model="price"></view>
					</view>
					<view class="bc" style="margin-left: 90px;">
						<button type="button" @click="addTwoData()" style="width: 100px;">
							<i class="ri-arrow-right-s-line" style="color:#fff;font-size:12px;"></i>
							<!-- <i-icon size="20upx" color="#fff" name="arrow-right-s-line"></i-icon> -->
							确定
						</button>
					</view>
				</view>
			</view>
		</view>
		<view v-if="add==3" class="p-tkb">
			<view class="p-tkh"></view>
			<view class="p-tk">
				<view class="tb">
					<view class="titem">
						<i class="ri-pencil-fill" style="color:#7800BE;font-size:22px;"></i>
						<!-- <i-icon size="20upx" color="#7800BE" name="pencil-fill" class="r10"></i-icon> -->
						编辑
					</view>
					<i class="ri-close-circle-fill" style="color:#f73164;font-size:28px;" @click="add=false"></i>
					<!-- <i-icon size="25upx" color="#f73164" name="close-circle-fill" @click="add=false"></i-icon> -->
				</view>
				<view class="com">
					<view class="li bc">
						<view class="wz">名称</view>
						<view class="nr"><input type="text" v-model="alterNema"></view>
					</view>
					<view class="li bc">
						<view class="wz">单位</view>
						<view class="nr">
							<select v-model="alterUnit">
								<option value="两">两</option>
								<option value="斤">斤</option>
								<option value="公斤">公斤</option>
								<option value="吨">吨</option>
							</select>
						</view>
					</view>
					<view class="li bc">
						<view class="wz">价格</view>
						<view class="nr"><input type="text" v-model="alterPrice"></view>
					</view>
					<view class="bc" style="margin-left: 90px;">
						<button type="button" @click="alterTwoData()" style="width: 100px;">
							<i class="ri-arrow-right-s-line" style="color:#fff;font-size:12px;"></i>
							<!-- <i-icon size="20upx" color="#fff" name="arrow-right-s-line"></i-icon> -->
							确定
						</button>
					</view>
				</view>
			</view>
		</view><view class="footer">
				<p><text style="margin-right: 5upx;">Copyright © 2022 桂民社区服务站</text>
					<text>Powered by 奇果科技</text>
				</p>
			</view>
	</view>


</template>
<script>
	export default {
		data() {
			return {
				add: 0,
				noeNema: '',
				thisOneName: '',
				twoNema: '',
				unit: '',
				price: '',
				superId: '',
				alterId: '',
				alterNema: '',
				alterUnit: '',
				alterPrice: '',
				listNoe: [],
				listTwo: [],
				testData: [{
						id: 1,
						name: '废纸'
					},
					{
						id: 2,
						name: '纯黄纸',
						superId: 1,
						unit: '斤',
						price: 1
					},
					{
						id: 3,
						name: '硬卡纸',
						superId: 1,
						unit: '斤',
						price: 1.20
					},
					{
						id: 4,
						name: '废金属'
					},
					{
						id: 5,
						name: '铁',
						superId: 4,
						unit: '斤',
						price: 5
					},
					{
						id: 6,
						name: '铜',
						superId: 4,
						unit: '斤',
						price: 7
					}
				],

			}
		},
		methods: {
			getNoeSList() {
				uni.request({
					url: this.baseURL + '/Recycle/list/one',
					method: 'POST',
					header: {
						'content-type': 'application/json;carset=utf-8',
						'token': uni.getStorageSync('token')
					},
					success: (res) => {
						console.log(res)
						if (res.data.success == true) {
							this.listNoe = res.data.data;
						} else {
							uni.showToast({
								title: res.data.message,
								icon: 'error',
								duration: 2000
							})
						}
					},
					fail: (err) => {
						console.log(err)
						uni.showToast({
							title: "请求异常，请稍后重试",
							icon: 'error',
							duration: 2000
						})
					}
				})
			},
			getTwoSList() {
				uni.request({
					url: this.baseURL + '/Recycle/list/two',
					method: 'POST',
					header: {
						'content-type': 'application/json;carset=utf-8',
						'token': uni.getStorageSync('token')
					},
					success: (res) => {
						console.log(res)
						if (res.data.success == true) {
							this.listTwo = res.data.data;
						} else {
							uni.showToast({
								title: res.data.message,
								icon: 'error',
								duration: 2000
							})
						}
					},
					fail: (err) => {
						console.log(err)
						uni.showToast({
							title: "请求异常，请稍后重试",
							icon: 'error',
							duration: 2000
						})
					}
				})
			},
			deleteTwo(item) {
				let th_is_ = this;
				uni.showModal({
					content: '确认要删除\"' + item.name + '\"子级吗？',
					success(res) {

						if (res.confirm) {
							uni.request({
								url: th_is_.baseURL + '/Recycle/delete?id=' + item.id,
								method: 'GET',
								header: {
									'content-type': 'application/json;carset=utf-8',
									'token': uni.getStorageSync('token')
								},
								success: (res) => {
									console.log(res)
									if (res.data.success == true) {
										th_is_.getNoeSList();
										th_is_.getTwoSList();
									} else {
										uni.showToast({
											title: res.data.message,
											icon: 'error',
											duration: 2000
										})
									}
								},
								fail: (err) => {
									console.log(err)
									uni.showToast({
										title: "请求异常，请稍后重试",
										icon: 'error',
										duration: 2000
									})
								}
							})
						} else {
							console.log('用户点击取消')
						}
					}
				})
			},
			alterTwo(item) {
				this.alterId = item.id;
				this.alterNema = item.twoName;
				this.alterPrice = item.price;
				this.alterUnit = item.unit;
				this.add = 3
			},
			addOne() {
				this.add = 1
			},
			addTwo(id, name) {
				this.thisOneName = name;
				this.superId = id;
				this.add = 2;
			},
			addOneData() {
				if (this.noeNema == '') {
					uni.showToast({
						title: '请输入名称',
						icon: 'error',
						duration: 2000
					})
					return;
				}
				uni.request({
					url: this.baseURL + '/Recycle/add/one?name=' + this.noeNema,
					method: 'GET',
					header: {
						'content-type': 'application/json;carset=utf-8',
						'token': uni.getStorageSync('token')
					},
					success: (res) => {
						console.log(res)
						if (res.data.success == true) {
							this.getNoeSList();
							this.add = false;
						} else {
							uni.showToast({
								title: res.data.message,
								icon: 'error',
								duration: 2000
							})
						}
					},
					fail: (err) => {
						console.log(err)
						this.add = false;
						uni.showToast({
							title: "请求异常，请稍后重试",
							icon: 'error',
							duration: 2000
						})
					}
				})
			},
			alterTwoData() {
				if (this.alterNema == '') {
					this.alterNema = null;
				}
				if (this.alterUnit == '') {
					this.alterUnit = null;
				}
				if (this.alterPrice == '') {
					this.alterPrice = null;
				}
				if (this.alterPrice == null && this.alterUnit == null && this.alterNema == null) {
					uni.showToast({
						title: '请至少修改一项',
						icon: 'error',
						duration: 2000
					});
					return;
				}
				let rseData = {
					"twoName": this.alterNema,
					"unit": this.alterUnit,
					"price": this.alterPrice,
					"id": this.alterId
				};
				uni.request({
					url: this.baseURL + '/Recycle/alter/two',
					method: 'POST',
					header: {
						'content-type': 'application/json;carset=utf-8',
						'token': uni.getStorageSync('token')
					},
					data: rseData,
					success: (res) => {
						console.log(res)
						if (res.data.success == true) {
							this.getTwoSList();
							//清除记忆
							this.alterNema = '';
							this.alterUnit = '';
							this.alterPrice = '';
							this.add = false;
						} else {
							uni.showToast({
								title: res.data.message,
								icon: 'error',
								duration: 2000
							})
						}
					},
					fail: (err) => {
						console.log(err)
						this.add = false;
						uni.showToast({
							title: "请求异常，请稍后重试",
							icon: 'error',
							duration: 2000
						})
					}
				})
			},
			addTwoData() {
				if (this.twoNema == '') {
					uni.showToast({
						title: '请输入名称',
						icon: 'error',
						duration: 2000
					})
					return;
				}
				if (this.unit == '') {
					uni.showToast({
						title: '请输入单位',
						icon: 'error',
						duration: 2000
					})
					return;
				}
				if (this.price == '') {
					uni.showToast({
						title: '请输入价格',
						icon: 'error',
						duration: 2000
					})
					return;
				}
				let resData = {
					"name": this.thisOneName,
					"twoName": this.twoNema,
					"unit": this.unit,
					"price": this.price,
					"superId": this.superId
				};
				uni.request({
					url: this.baseURL + '/Recycle/add/two',
					method: 'POST',
					header: {
						'content-type': 'application/json;carset=utf-8',
						'token': uni.getStorageSync('token')
					},
					data: resData,
					success: (res) => {
						console.log(res)
						if (res.data.success == true) {
							this.getTwoSList();
							this.twoNema = '';
							this.unit = '';
							this.price = '';
							this.add = false;
						} else {
							uni.showToast({
								title: res.data.message,
								icon: 'error',
								duration: 2000
							})
						}
					},
					fail: (err) => {
						console.log(err)
						this.add = false;
						uni.showToast({
							title: "请求异常，请稍后重试",
							icon: 'error',
							duration: 2000
						})
					}
				})
			}
		},
		onLoad() {
			this.getNoeSList();
			this.getTwoSList();
			// console.log(this.$data)
			// this.testData = this.listNoe;
			// console.log(this.testData)
		}
	}
</script>
